<template>
  <a-form-item label=" " :colon="false">
    <a-row v-if="props.itemData.type == 'range'">
      <a-col :span="11">
        <a-input
          :placeholder="`请输入${props.itemData.label}`"
          allow-clear
          type="number"
          v-model:value="range1"
          @blur="inputUpdateValue"
        />
      </a-col>
      <a-col :span="2" style="text-align: center">-</a-col>
      <a-col :span="11">
        <a-input
          :placeholder="`请输入${props.itemData.label}`"
          allow-clear
          type="number"
          v-model:value="range2"
          @blur="inputUpdateValue"
        />
      </a-col>
    </a-row>
    <a-input
      v-if="props.itemData.type == 'text' || props.itemData.type == 'info'"
      :placeholder="`请输入${props.itemData.label}`"
      allow-clear
      v-model:value.string="dataValue"
      @blur="inputUpdateValue"
    />
    <a-select
      v-if="
        props.itemData.type == 'select' ||
        props.itemData.type == 'status' ||
        props.itemData.type == 'api'
      "
      allow-clear
      :placeholder="`请选择${props.itemData.label}`"
      v-model:value.string="dataValue"
      @change="updateValue"
    >
      <a-select-option
        v-for="i in props.itemData.options"
        :key="'' + i.key"
        :value="'' + i.key"
      >
        {{ i.label }}
      </a-select-option>
    </a-select>
    <!-- <a-select
      v-if="
        props.itemData.type == 'selectajax' && props.itemData.name == 'supplier_code'
      "
      allow-clear
      placeholder="请选择"
      v-model:value.string="dataValue"
      @change="updateValue"
    >
      <a-select-option
        v-for="i in props.itemData.options"
        :key="'' + i.key"
        :value="'' + i.key"
      >
        {{ i.label }}
      </a-select-option>
    </a-select> -->
    <a-select
      v-if="
        props.itemData.type == 'selectajax' &&
        props.itemData.name == 'supplier_code'
      "
      optionFilterProp="label"
      :options="props.itemData.options"
      :filter-option="filterOption"
      show-search
      allow-clear
      autocomplete="off"
      :placeholder="`请选择${props.itemData.label}`"
      v-model:value.string="dataValue"
      @change="updateValue"
    />
    <a-date-picker
      v-if="props.itemData.type === 'daterange'"
      show-time
      placeholder="请选择日期"
      v-model:value="dataValue"
      @ok="dateUpdateValue"
    />
    <!-- daterange -->
    <a-range-picker
      v-if="props.itemData.type === 'timerange'"
      show-time
      v-model:value="create_time"
      @change="daterangeUpdateValue"
    />
  </a-form-item>
</template>

<script setup>
  import { reactive, ref, watch } from 'vue';
  import { get_supplier_list } from '@/api/jewelry/receipts_purchase';
  const props = defineProps({
    itemData: Object,
    dataValue: {
      type: String,
      default: null
    }
  });
  const emit = defineEmits([
    'update:value',
    'blur',
    'getPos',
    'getTime',
    'getUpdateTime'
  ]);
  const range1 = ref(null);
  const range2 = ref(null);
  const dataValue = ref(null);
  const create_time = ref(null);
  if (props.dataValue) {
    dataValue.value = props.dataValue;
  }
  watch(
    () => [props.dataValue],
    (newValue, oldValue) => {
      console.log('----', newValue[0]);
      dataValue.value = newValue[0];
      if (newValue[1]) {
        imageUrl.value = newValue[1];
      }
    }
  );

  if (
    props.itemData.type == 'selectajax' &&
    props.itemData.name == 'supplier_code'
  ) {
    get_supplier_list({ page: 1, page_size: 99999 }).then((res) => {
      let options = [];
      res.list.map((item) => {
        options.push({
          value: String(item.code),
          label: item.name
        });
      });
      props.itemData.options = options;
    });
  }

  //下拉框带搜索功能
  const filterOption = (input, option) => {
    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };
  /*  */
  const inputUpdateValue = () => {
    //emit('update:value', dataValue.value.toString());
    if (props.itemData.type == 'range') {
      if (
        props.itemData.name == 'piece_weight' ||
        props.itemData.name == 'gold_weight' ||
        props.itemData.name == 'labour_cost' ||
        props.itemData.name == 'inlay_cost' ||
        props.itemData.name == 'cost' ||
        props.itemData.name == 'labour_price' ||
        props.itemData.name == 'purchase_labour_amount' ||
        props.itemData.name == 'sticker_price' ||
        props.itemData.name == 'hand_inch' ||
        props.itemData.name == 'inner_diameter' ||
        props.itemData.name == 'length' ||
        props.itemData.name == 'cert_first_weight'
      ) {
        let range = range1.value + '-' + range2.value;
        emit('update:value', range);
      }
    } else {
      emit('update:value', dataValue.value?.toString());
    }
  };
  /* select选择框改变事件 */
  const updateValue = () => {
    //console.log('dataValue.value==', dataValue.value);
    if (
      props.itemData.name == 'stock_code' ||
      props.itemData.name == 'class_code' ||
      props.itemData.name == 'series_code'
    ) {
      let data = {
        label: props.itemData.name,
        value: dataValue.value
      };
      emit('getPos', data);
    }
    emit('update:value', dataValue.value?.toString());
  };
  const daterangeUpdateValue = (date, dateString) => {
    //console.log('dateString>>>>>>>>>>>>>>>', dateString);
    console.log('dateString>>>>>>>>>>>>>>>', props.itemData);
    if (props.itemData.name == 'create_time') {
      emit('getTime', dateString);
    } else if (props.itemData.name == 'update_time') {
      emit('getUpdateTime', dateString);
    }
  };
  const dateUpdateValue = (e) => {
    //e = e.format('YYYY-MM-DD HH:mm:ss');
    emit('update:value', dataValue);
  };
</script>
